<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>组件几个注意点</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <!-- 
          几个注意点：
              1.关于组件名:
                    一个单词组成：
                          第一种写法(首字母小写)：school
                          第二种写法(首字母大写)：School
                    多个单词组成：
                          第一种写法(kebab-case命名)：my-school
                          第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
                    备注：
                        (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
                        (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

              2.关于组件标签:
                    第一种写法：<school></school>
                    第二种写法：<school/>
                    备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

              3.一个简写方式：
                    const school = Vue.extend(options) 可简写为：const school = options
        -->

    <!-- 常用首字母大写，和驼峰命名方式，能和浏览器开发者工具呼应 -->

    <div id="root">
      <h1>{{msg}}</h1>
      <school></school>
      <no-extend></no-extend>
      <hr />
      <!-- <school/>需配合脚手架使用，否则只会展示一个 -->
      <school />
      <school />
    </div>
  </body>

  <script type="text/javascript">
    //1：声明一个组件
    const s = Vue.extend({
      template: `
        <div>
          <h2>学校名称: {{schoolName}}</h2>
          <h2>学校地址: {{address}}</h2>
        </div>
      `,
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      //一般为第三方或指定组件规范，设置页面展示的名字。 不影响VM中定义的组件名使用
      name: "atguigu",
    });

    //创建组件简写方式，直接声明。  底层调用了Vue.extend
    const noExtend = {
      template: `
        <div>
          <h2>简写方式: {{flag}}</h2>
        </div>
      `,
      data() {
        return {
          flag: true,
        };
      },
      //一般为第三方或指定组件规范，设置页面展示的名字。 不影响VM中定义的组件名使用
    };

    //2：局部注册组件
    new Vue({
      el: "#root",
      data: {
        msg: "欢迎学习Vue",
      },
      components: {
        school: s,
        //多个单词使用-分割，需要加引号     简写方式会在Vue渲染时自动调用Vue.extend
        "no-extend": noExtend,
      },
    });
  </script>
</html>
